<template>
  <div class="k-btn-wrap k-letters">
    <ul class="fl num-ul">
      <li
        v-for="(row, idx) in cp_ordinary"
        :key="idx"
        class="clear-fix k-row"
        :class="{['k-row-' + cp_ordinary.length]: 1}"
      >
        <template
          v-for="(btn, i) in row"
        >
          <span
            v-if="btn.expect === 'languageSwitch'"
            :key="i"
            class="fl k-btn switch"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
            @touchstart.stop="active = `${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >
            <span class="sw-item">
              <span class="fl">{{ btn.view[boardModel].split('/')[0] + '/' }}</span>
              <span class="sw-text fl">{{ btn.view[boardModel].split('/')[1] }}</span>
            </span>
          </span>
          <span
            v-else-if="btn.expect === 'delete'"
            :key="i"
            class="fl k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
            @touchstart.stop="deleteClick($event, btn, `${idx}_${i}`)"
            @touchend.stop="pressUp"
            @click.stop="pressClick($event, btn)"
          />
          <span
            v-else
            :key="i"
            class="fl k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`, disable: disableBtn.includes(btn.expect)}]"
            @touchstart.stop="active = `${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || ((isUpper && btn.type === 'default') && btn.text.toUpperCase() || btn.text) }}</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
/******************/
/******************/
// region    //import
import { KeepPress } from './index';
import { _implant } from './utils';

// endregion

/******************/
/******************/
// region    //initialize

// endregion

/******************/
/******************/
// region    //export

export default {
    name: 'TheCombo',
    props: {
        boardData: {
            type: Object,
            required: true,
        },
        boardModel: {
            type: String,
            default: '',
        },
        boardType: {
            type: String,
            default: '',
        },
        mobile: {
            type: Boolean,
            default: true,
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            isUpper: false, // 是否大写
            model: 'text',
            pressDown: press.down(($event, data) => {
                this.active = '';
                this.$emit('keep-press', $event, data);
            }, 1000),
            pressUp: press.up((e) => {
                this.active = '';
                this.$emit('btn-click', e, {
                    'text': '删除',
                    'type': 'symbol delete',
                    'expect': 'delete',
                });
            }),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            active: '',
        };
    },
    computed: {
        cp_ordinary () {
            let { symbols, keysText: { ordinary, defaultSymbol } } = this.boardData;
            let origin = ordinary[3];
            let lastArr = null;
            let defArr = Object.entries(defaultSymbol).map(([k, itm]) => Object.assign({}, itm, { text: k }));
            let sym = symbols.length > 0 && symbols[0].items || defArr;

            if (this.boardType === 'combo') {
                if (sym.length > defArr.length || symbols.length > 1) {
                    lastArr = _implant([origin, sym], [
                        {
                            index: 0,
                            count: 1,
                        },
                        {
                            index: 1,
                            count: 1,
                        },
                        {
                            index: 0,
                            count: 3,
                        },
                    ], defArr);
                } else {
                    lastArr = [origin[0], ...sym.slice(0, 2), origin[1], ...sym.slice(2, 3), ...origin.slice(2, 4)];
                }
            } else if (this.boardType === 'chinese') {
                if (sym.length > defArr.length || symbols.length > 1) {
                    lastArr = _implant([origin, sym], [
                        {
                            index: 1,
                            count: 2,
                        },
                        {
                            index: 0,
                            count: origin.length,
                        },
                    ], Object.entries(defaultSymbol).map(([k, itm]) => Object.assign({}, itm, { text: k })));
                } else {
                    lastArr = [...sym.slice(0, 3), ...origin];
                }
            }

            return [...ordinary.slice(0, 3), lastArr];
        },
        cp_right () {
            return this.boardData.keysText.large && {
                width: '20%',
            };
        },
        cp_left () {
            return this.boardData.keysText.large && {
                width: '80%',
            };
        },
    },
    watch: {
        boardData () {
            this.isUpper = false;
        },
    },
    mounted,
    methods: {
        btnClick (e, data) {
            let { expect, type, text } = data;
            let isUpper = null;
            this.active = '';
            if (expect === 'caseSwitch') {
                this.isUpper = !this.isUpper;
            }
            ({ isUpper } = this);
            if (isUpper && type === 'default') {
                text = text.toUpperCase();
            }
            this.$emit('btn-click', e, Object.assign({}, data, {
                text,
                isUpper: this.isUpper,
            }));
        },
        deleteClick ($event, btn, cls) {
            this.active = cls;
            this.pressDown($event, btn);
        },
    },
};
// endregion

/******************/
/******************/
// region    //function

/**
   *组件挂载成功执行函数
   */
function mounted () {
}

// endregion

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

  .num-ul, .sym-pad {
    height: 100%;
    width: 100%;
  }

  .k-btn-wrap {
    position: relative;
  }

  .sym-aside, .k-btn-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #f5f7f8;
  }

  .k-btn-box {
    z-index: 0;
  }

  .switch {
    .sw-text:last-child {
      font-size: 50%;
      white-space: nowrap;
    }
  }

  .sw-item {
    align-items: baseline;
    display: flex;
  }
</style>
